<template>
  <div>
    <div
      v-for="(item, index) in yunweiPaixu"
      :key="index"
      @mouseover="handleMouseover(item)"
      class="border-bottom-info pdsz1015 pointer hover-active-f1"
    >
      <el-tooltip placement="left">
        <div class="size16" slot="content">
          <div class="lh26">
            <div>时间范围已接单：{{ item.jiedan || 0 }}</div>
            <div>时间范围已完成：{{ item.weichaoshiTotal || 0 }}</div>
            <div
              class="mrt10 "
              style="max-width:350px"
              v-if="item.status == '忙碌'"
            >
              <span>工作内容：</span>
              <div class="size16">
                <div class="flex " v-if="mangluData.gongdanDetail">
                  <span style="min-width:50px">工单：</span>
                  <div class="scrollbar-slinder" style="max-height:200px;">
                    {{ mangluData.gongdanDetail }}
                  </div>
                </div>
                <div class="flex " v-if="mangluData.xunjianDetail">
                  <span style="min-width:50px">巡检：</span>
                  <div class="scrollbar-slinder" style="max-height:200px;">
                    {{ mangluData.xunjianDetail }}
                  </div>
                </div>
              </div>
            </div>
            <div class="mrt10">
              服务单位
              <div class="scrollbar-slinder" style="max-height:200px;">
                <div
                  class="color-info size14"
                  v-for="(company, index1) in item.companyList"
                  :key="index1"
                >
                  {{ company.companyTreeName }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="flex justify-between align-center lh24 full-width ">
          <div class="flex align-center full-width">
            <div class="mrr10 text-center lh16">
              <img
                :src="
                  item.status == '空闲'
                    ? '/fabu-admin/widgetimgs/peo-g.png'
                    : '/fabu-admin/widgetimgs/peo-r.png'
                "
                alt=""
              />
              <div
                :class="
                  item.status == '空闲'
                    ? 'color-success'
                    : item.status == '休假'
                    ? 'color-warning'
                    : 'color-danger'
                "
              >
                {{ item.status }}
              </div>
            </div>
            <div class="lh20 " style="width:calc(100% - 40px)">
              <div class="color-drak">
                <i class="el-icon-user color-primary"></i
                ><strong> {{ item.customName || "未命名" }}</strong>
              </div>
              <div
                class="flex justify-between align-center lh24 full-width mrt8"
              >
                <div class="color-gray ">
                  <i class="el-icon-phone-outline color-active"></i>
                  {{ item.mobile }}
                </div>
                <div class="color-gray ">
                  <i class="el-icon-user color-primary"></i> 服务单位:
                  <span class="color-primary">
                    {{ item.companyList.length || 0 }}</span
                  >个
                </div>
                <div class="color-gray ">
                  <i class="el-icon-user color-primary"></i> 已巡检数:
                  <span class="color-primary">
                    {{ item.xunjianTotal || 0 }}</span
                  >次
                </div>
                <div class="color-gray ">
                  <div>
                    已接单：
                    <span class="num-color size16 color-primary">{{
                      item.jiedan || 0
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tooltip>
    </div>
  </div>
</template>
<script>
import { totalOrderGcschuliDetail as detailApi } from "@/api";
export default {
  data() {
    return {
      mangluData: {
        gongdanDetail: "",
        xunjianDetail: ""
      },
      nowUserId: null
    };
  },
  props: {
    yunweiData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  computed: {
    yunweiPaixu() {
      if (!this.yunweiData?.length) return [];
      let xiujia = [],
        manglu = [],
        kongxian = [];
      this.yunweiData.forEach(item => {
        if (item.status == "忙碌") {
          manglu.push(item);
        } else if (item.status == "休假") {
          xiujia.push(item);
        } else {
          kongxian.push(item);
        }
      });
      return manglu.concat(xiujia).concat(kongxian);
    }
  },
  mounted() {},
  methods: {
    // 判断是否支持显示
    showJudge(data) {
      //IE
      if (document.addEventListener) {
        document.addEventListener("msvisibilitychange", function() {
          console.log(document.msVisibilityState);
        });
      }
      //FF
      if (document.addEventListener) {
        document.addEventListener("mozvisibilitychange", function() {
          console.log(document.mozVisibilityState);
        });
      }
      //chrome
      if (document.addEventListener) {
        document.addEventListener("webkitvisibilitychange", function() {
          console.log(document.webkitVisibilityState);
        });
      }
      console.log("启动弹窗了!");
      Notification.requestPermission(result => {
        // 只有当result为granted时，才会执行下方的new Notification代码，denied和default不会执行
        const notification = new Notification("您有一条通知,请查看", {
          dir: "ltr", //dir : 文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左）
          body: `我是通知的信息`, //body: 通知中额外显示的字符串
          icon: "/fabu-admin/widgetimgs/note.png" // 一个图片的URL，将被用于显示通知的图标。
          // tag: 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。
        });
        // 可以添加事件，来触发交互
        notification.onclick = function() {
          console.log("notification");
        };
      });
    },
    handleMouseover(row) {
      if (row.userId == this.nowUserId) {
        if (row.status == "忙碌") {
          this.lookml(row);
        }
      } else {
        this.nowUserId = row.userId;
        if (row.status == "忙碌") {
          this.lookml(row);
        }
      }
    },
    async lookml(row) {
      let { data, msg, code } = await detailApi({ userName: row.userName });
      this.mangluData = data;
    }
  }
};
</script>
